<template>
    <div class="container">
        <el-form :model="userInfo" label-width="5rem" :rules="rules">
            <el-form-item prop="username">
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user />
                        </el-icon>
                        用户名
                    </div>
                </template>
                <el-input v-model="userInfo.username"></el-input>
            </el-form-item>
            <el-form-item prop="telephone">
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <iphone />
                        </el-icon>
                        手机号
                    </div>
                </template>
                <el-input v-model="userInfo.telephone"></el-input>
            </el-form-item>
            <el-form-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <coin />
                        </el-icon>
                        性别
                    </div>
                </template>
                <el-radio-group v-model="userInfo.sex">
                    <el-radio label="男" name="sex" value="男"></el-radio>
                    <el-radio label="女" name="sex" value="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <message />
                        </el-icon>
                        邮箱
                    </div>
                </template>
                {{ userInfo.email === "" ? "未设置邮箱，请去 邮箱管理 修改" : userInfo.email }}
            </el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
        </el-form>
    </div>
</template>

<script>
import store from "@/store";
import service from "@/utils/request";
import { Iphone, User, Message, Coin } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

export default {
    components: {
        Iphone,
        User,
        Message,
        Coin,
    },
    mounted() {
        this.userInfo = { ...store.state.userInfo };
    },
    data() {
        return {
            userInfo: {},
            rules: {
                username: {
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请输入用户名"));
                        } else {
                            callback();
                        }
                    },
                    min: 1,
                    trigger: "change",
                },
                telephone: {
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请输入11位手机号"));
                        } else if (
                            !value.match(/^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/)
                        ) {
                            callback(new Error("手机号码格式不正确"));
                        } else {
                            callback();
                        }
                    },
                    length: 11,
                    trigger: "change",
                },
            },
        };
    },
    computed: {},
    methods: {
        submitForm() {
            service({
                method: "post",
                url: "/user/saveUser",
                headers: {
                    token: store.state.token,
                    "Content-type": "application/json",
                },
                data: {
                    ...this.userInfo,
                },
            })
                .then((res) => {
                    ElMessage({
                        type: "success",
                        message: "修改成功",
                    });
                    store.commit("setUserInfo");
                    // 获取用户信息
                    store.commit("getUserInfo");
                    setTimeout(() => {
                        window.location.reload();
                    }, 200);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    beforeMount() {},
};
</script>
<style lang="scss" scoped>
.container {
}
</style>
